<template>
  <div>
     <qy-navigation></qy-navigation>
     <qy-sidebar></qy-sidebar>
     <div class="home" >
        <sh-header></sh-header>
        <div class="container" >
          <div>
            <sh-project></sh-project>
            <sh-dynamic></sh-dynamic>
          </div>
          <div> 
            <sh-shortcart></sh-shortcart>
            <sh-towork></sh-towork>
          </div>
        </div>
     </div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  onMounted,
  inject
} from "vue";
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import shHeader from "./components/sh-header.vue"
import shProject from "./components/sh-project"
import shDynamic from "./components/sh-dynamic"
import shShortcart from "./components/sh-shortcart"
import shTowork from "./components/sh-towork"
export default {
  name: "home",
  components:{
   "sh-header":shHeader,
   "sh-project":shProject,
   "sh-dynamic":shDynamic,
   "sh-shortcart":shShortcart,
   "sh-towork":shTowork
  },
  setup() {
    // 定义路由
    const router = useRouter()
    const route = useRoute()
    // 定义存储
    const store = useStore()
    // 定义数据
    const state = reactive({
      count: 0
    });
    const Request = inject("$Request")
    const Api = inject("$Api")
    const initData = () => {
        console.log("初始化数据")
        Request.requestGet('', Api.apiUser.list)
        .then((res) => {
            console.log(res)
        })
        .catch((err) => {
            console.log(err);
        });
    };
    //声明周期
    onMounted(() => {
      //initData()
      console.log('loading hom data')
    })
    return {
      ...toRefs(state),
      initData
    };
  },
};
</script>
<style lang="scss" scoped>
.home{
  margin-top: 60px;
  margin-left: 256px;
  padding: 14px 24px 14px 34px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: auto;
  .container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
}
</style>